import React from 'react'
import word from '../../assets/css/common/word.module.css'
import {localParam} from "../../components/common/function";

export default class WordComponent extends React.Component {
    constructor(){
        super();
        this.state={
            txtList:[],
            key:'',
            src:"images/home/goods/down.png",
            show:true
        }
    }
    goBack(){
        this.props.history.goBack()
    }
    details(path){
        this.props.history.replace(path)
    }
    componentWillMount() {
        this.getData()
    }
    getData(){
        let key = decodeURIComponent(localParam(this.props.location.search).search.keyword);
        this.setState({key:key});
        console.log(key);
        fetch('http://vueshop.glbuys.com/api/home/goods/search?kwords='+key+'&param=&page=1&price1=&price2=&otype=all&cid=&token=1ec949a15fb709370f')
            .then((res)=>{
                return res.json()
            }).then(res=>{
                // console.log(res.data);
            if (res.code===200){
                this.setState({txtList:res.data});
            }
        })
    }
    isShow(){
        if (this.state.show){
            this.refs.sort.style.overflow = 'visible';
            this.setState({src:'images/home/goods/up.png'});
        }else {
            this.refs.sort.style.overflow = 'hidden';
            this.setState({src:'images/home/goods/down.png'});
        }
        this.setState({show:!this.state.show});
    }
    add(){
        // this.state.txtList.sort(all);
        this.setState({txtList:this.state.txtList});
        document.getElementById('add').style.color='#fcb40a';
        document.getElementById('max').style.color='black';
        document.getElementById('min').style.color='black';
        document.getElementById('sales').style.color='black';
        this.isShow()
    }
    min(){
        this.state.txtList.sort((a,b)=>a.price - b.price);
        this.setState({txtList:this.state.txtList});
        document.getElementById('min').style.color='#fcb40a';
        document.getElementById('max').style.color='black';
        document.getElementById('add').style.color='black';
        document.getElementById('sales').style.color='black';
        this.isShow()
    }
    max(){
        this.state.txtList.sort((a,b)=>a.price - b.price).reverse();
        this.setState({txtList:this.state.txtList});
        document.getElementById('max').style.color='#fcb40a';
        document.getElementById('min').style.color='black';
        document.getElementById('add').style.color='black';
        document.getElementById('sales').style.color='black';
        this.isShow()
    }
    sales(){
        this.state.txtList.sort((a,b)=>a.sales - b.sales).reverse();
        this.setState({txtList:this.state.txtList});
        document.getElementById('sales').style.color='#fcb40a';
        document.getElementById('min').style.color='black';
        document.getElementById('max').style.color='black';
        document.getElementById('add').style.color='black';
    }

    render() {
        return(
            <div className={word.boxWord}>
                <nav>
                    <img src={require('../../assets/images/home/goods/back.png')} alt='' onClick={this.goBack.bind(this)}/>
                    <img className={word.img} src={require('../../assets/images/common/search.png')} alt=''/>
                    <input type='text' placeholder={this.state.key} alt="" disabled/>
                    <span>筛选</span>
                </nav>
                <ul className={word.boxUl} ref="sort">
                    <li onClick={this.isShow.bind(this)} style={{fontSize:'20px'}}>综合<img src={this.state.src} alt=""/></li>
                    <li onClick={this.add.bind(this)} id='add'>综合</li>
                    <li onClick={this.min.bind(this)} id='min'>价格从低到高</li>
                    <li onClick={this.max.bind(this)} id='max'>价格从高到低</li>
                    <p onClick={this.sales.bind(this)} id='sales'>销量</p>
                </ul>
                <div style={{paddingTop:'110px'}}>
                    {
                        this.state.txtList.map((item,index)=>{
                            return(
                                <div key={index} onClick={this.details.bind(this,'/goods/details/item?gid='+item.gid)} className={word.boxActive}>
                                    <p><img src={item.image} alt=''/></p>
                                    <div>
                                        {item.title}
                                        <p>￥{item.price}</p>
                                        销量<span>{item.sales}</span>件
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        )
    }
}